<!-- pages/cate/cate.vue -->
<template>
  <view class="cate">
    <!-- ref可用于组件标签获取实例，但用于原生标签无效 -->
    <view id='top'>
      <my-search @click="goSearch"></my-search>
    </view>
    <!-- 内容区域 -->
    <view class="content">
      <scroll-view class="left vh" scroll-y="true" :style="{height:pageH+'px'}">
        <view @click="leftClick(index)" class="item" :class="{active:index===currIndex}" v-for="(item, index) in list"
          :key="item.cat_id">
          {{item.cat_name}}
        </view>
      </scroll-view>
      <scroll-view class="right vh" scroll-y="true" :style="{height:pageH+'px'}" :scroll-top="scrollTop">
        <view class="item" v-for="(item, index) in list[currIndex].children" :key="item.cat_id">
          <view class="title">
            /{{item.cat_name}}/
          </view>
          <!-- 三级分类 -->
          <view class="subbox">
            <view class="subitem" v-for="(i, v) in item.children" :key="v" @click="goList(i.cat_name)">
              <image :src="i.cat_icon" mode="widthFix"></image>
              <text>{{i.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>


<script>
  import mixinjs from '@/mixins/index.js'
  export default {
    mixins: [mixinjs],
    data() {
      return {
        list: [],
        currIndex: 0,
        pageH: 0,
        scrollTop: 0
      };
    },
    onLoad() {
      this.categories()
      this.getHeight()
    },
    methods: {
      async categories() {
        const res = await uni.$http.get('/categories')
        this.list = res.message
        console.log('分类', res);
      },
      // 左侧点击
      leftClick(index) {
        this.currIndex = index
        this.scrollTop = 1 - this.scrollTop
      },
      // 获取系统高度
      async getHeight() {
        // const query = uni.createSelectorQuery().in(this);
        // query.select('#top').boundingClientRect(async data => {
        //   // console.log("得到布局位置信息" + JSON.stringify(data));
        //   const res = await uni.getSystemInfoAsync()
        //   this.pageH = res.windowHeight - data.height
        //   // console.log('系统信息', res);
        // }).exec();
        const res = await uni.getSystemInfoAsync()
        this.pageH = res.windowHeight - 55

      },
      goList(name) {
        uni.navigateTo({
          url: "/pages/list/list?key=" + name
        })
      },
      goSearch() {
        uni.navigateTo({
          url: "/pages/search/search"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cate {
    .content {
      display: flex;
      font-size: 12px;

      .left {
        width: 200rpx;

        .item {
          background-color: #f7f7f7;
          text-align: center;
          height: 100rpx;
          line-height: 100rpx;

          &.active {
            background-color: #fff;
            position: relative;

            &::before {
              content: '';
              width: 4rpx;
              height: 50rpx;
              background-color: #c00000;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }

  .right {
    .item {
      font-weight: 700;
      text-align: center;
      line-height: 100rpx;

      .subbox {
        display: flex;
        flex-wrap: wrap;

        .subitem {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 33.333%;

          image {
            width: 60%;
          }
        }
      }
    }
  }

  // .vh {
  //   height: 100vh;
  // }
</style>